<template>
  <v-page class="bg-light justify-around page-max">
    <view></view>
    <view class="fn-center">
      <view class="fn-24">手机号注册</view>
    </view>
    <!-- form -->
    <view class="form p-x-20">
      <picker class="fn-xl m-b-sm m-l-md">
        中国(+86)
        <text class="iconfont fn-24 fn-middle">&#xe601;</text>
      </picker>
      <v-input
        placeholder="请输入手机号"
        class="bg-gray-2 p-x-md h-36 d-flex align-center fn-md rounded m-b-25"
      >
        <template #left>
          <view class="w-60 m-r-md fn-lg"> 手机号 </view>
        </template>
      </v-input>
      <view class="d-flex justify-between">
        <v-input
          placeholder="请输入密码"
          class="bg-gray-2 p-x-md h-36 d-flex align-center fn-md rounded m-b-25 flex-fill"
          type="password"
        >
          <template #left>
            <view class="w-60 m-r-md fn-lg"> 密码 </view>
          </template>
        </v-input>
        <v-code url="''" class="code m-l-md" />
      </view>
    </view>
    <!-- button-group -->
    <view class="btn-group">
      <v-button type="theme" disabled @click="_router.push('/pages/reg/setting')" class="btn m-b-25 rounded-lg"
        >下一步</v-button
      >
      <view class="fn-center fn-md color-gray-1">
        <view class="m-b-25"> 点击“下一步”即表示已阅读并同意 </view>
        <view class="fn-sm">
          <u-checkbox v-model="check" class="fn-sm"
            >《微聊用户协议和隐私政策》</u-checkbox
          >
        </view>
      </view>
    </view>
    <!-- link -->
    <view class="footer fn-center fn-md color-tips">
      已有账号？
      <v-link to="/pages/login/index" class="color-default">登录</v-link>
    </view>
  </v-page>
</template>
<script>
import uCheckbox from "uview-ui/components/u-checkbox/u-checkbox.vue";
export default {
  components: {
    uCheckbox,
  },
  data() {
    return {
      check: false,
    };
  },
};
</script>
<style lang="scss" scoped>
.page-max {
  height: 100vh;
}
.p-x-20 {
  padding-left: 40rpx;
  padding-right: 40rpx;
}
.m-b-25 {
  margin-bottom: 50rpx;
}
.form {
  .code {
    height: 72rpx;
  }
}
.btn-group {
  width: 500rpx;
  margin: 0 auto;
  .btn {
    height: 100rpx;
    &.rounded-lg:after{
        border-radius: $border-radius-lg*2;
    }
  }
}
.footer {
  .link {
    line-height: 1.5;
  }
}
</style>